<template>
 <div>
    <!-- 文本域 -->
    <textarea
        cols="20"
        rows="5"
        placeholder="请输入你的反馈信息"
        v-model="feedback"></textarea>
        <!-- placeholder用于绑定 提示信息，⽂本域内不可编辑提示信息 -->

    <br><br>
    
    <!-- 下拉菜单 -->
    <select v-model="city">
        <option value="SH">上海</option>
        <option value="BJ">北京</option>
        <option value="CS">长沙</option>
        <option value="WH">武汉</option>
        <!-- v-model 通过寻找 value的值 双向绑定city -->
    </select>

    <br><br>

    <!-- 单选框 -->
    <input
        type="radio"
        value="a"
        v-model="blood"/>A
    <input
        type="radio"
        value="b"
        v-model="blood"/>B
    <input
        type="radio"
        value="ab"
        v-model="blood"/>AB
    <input
        type="radio"
        value="o"
        v-model="blood"/>O
    
    <br><br>

    <!-- 复选框 -->

    <!-- 单个复选框 绑定布尔值 -->
    <input
        type="checkbox"
        v-model="isAgree"/>是否同意用户协议
    <br><br>

    <!-- 多个复选框 绑定数组 -->
    爱好：
    <input
        type="checkbox"
        value="soccor"
        v-model="hobby">足球
    
    <input
        type="checkbox"
        value="basketball"
        v-model="hobby">蓝球

    <input
        type="checkbox"
        value="pingpang"
        v-model="hobby">乒乓球


 </div>

</template>

<script setup>
    import { ref } from 'vue';    
    //收集反馈
    const feedback = ref('')

    //选择城市
    const city = ref('SH')
    
    //收集血型
    const blood = ref('')

    //是否同意用户协议
    const isAgree = ref(true)

    //收集爱好
    const hobby = ref([])
</script>

<style>

</style>